<template>
  <view class="container">
    <view class="tabs">
      <u-tabs :list="tabs" :activeStyle="activeStyle" :itemStyle="itemStyle" :lineHeight="0" @click="click"></u-tabs>
    </view>
    <view class="content" >
      <view class="orderList" v-if="list.length > 0">
        <view class="orderItem" v-for="(item,index) in list" :key="index" >
          <view class="flex space-between">
            <view class="order-num" @longpress="copyText(item.orderSn)">
              <text>订单号：</text>
              <text >{{ item.orderSn }}</text>
            </view>
            <view class="order-status">
              <text>{{ item.orderStatusText }}</text>
            </view>
          </view>
          <view class="flex content" @click="goDetail(item.id)">
            <image :src="item.goodsList[0].picUrl" class="image"/>
            <view>
              <view class="name">{{item.goodsList[0].goodsName}}</view>
              <view class="sku">规格：{{ item.goodsList[0].specifications[0] }}</view>
            </view>
            <view class="right">
              <view class="price">￥<span>{{ item.goodsPrice }}</span></view>
              <view class="number">×{{item.goodsList[0].number}}</view>
            </view>
          </view>
          <view class="actualPrice">
            <text class="price"><span>￥</span>{{ item.actualPrice }}</text>
            <text>实付款</text>
          </view>
          <view class="bottom">
            <view class="btn" v-if="item.handleOption.pay" @click="onPrepay(item.id,item.actualPrice)">去支付</view>
            <view class="btn" v-if="item.handleOption.confirm" @click="confirmOrder(item.id)">确认收货</view>
            <view class="btn" v-if="item.orderStatus != 204 && item.signStatus == 1" @click="createSign(item.id)">去签署</view>
            <view class="btn" v-if="item.orderStatus != 204 && item.signStatus == 2 && !isOfflineTask(item.taskList)" @click="signTask(item.id)">继续签署</view>
            <view class="btn" v-if="item.orderStatus != 204 && item.signStatus == 3 && !isOfflineTask(item.taskList)" @click="signTask(item.id)">签署详情</view>
            <view class="btn btn1" v-if="item.orderStatus != 204 && item.signStatus == 4 && !isOfflineTask(item.taskList)" >签署失败</view>
            <view class="btn btn1" v-if="item.orderStatus != 204 && item.signStatus == 5 && !isOfflineTask(item.taskList)" >待甲方签署</view>
            <view class="btn btn1" v-if="item.orderStatus != 204 && item.signStatus == 6 && !isOfflineTask(item.taskList)" >待达标后签署</view>
            <view class="btn" v-if="getTaskStatus(item.taskList)[0].status == 3" @click="edit1(item.id)">修改支付凭据</view>
            <view class="btn" v-if="getTaskStatus(item.taskList)[1].status == 3" @click="edit2(item.id)">修改合同凭据</view>
<!--            <view class="btn" v-if="item.orderStatus == 401" @click="goInvoicing(item.id)">申请开票</view>-->
          </view>
        </view>
      </view>
      <empty v-else :isLoading="isLoading" :custom-style="{ padding: '180rpx 50rpx' }" tips="暂无订单">
      </empty>
      <u-loadmore :status="status" />
    </view>
    <u-popup :show="popup" closeable round="24rpx" mode="center" @close="popup=false">
      <view class="popup" :safeAreaInsetBottom="false">
        <view class="title">支付</view>
        <view class="content">
          <view class="image" >
            <image :src="$Config.get('imageUrl')+'/pay.jpg'" show-menu-by-longpress/>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>

import authMixins from "@/common/authSignTask.mixins.js";
export default {
  data(){
    return {
      isLoading: true,
      popup:false,
      tabs:[
        {
          name:"全部",
          value:0
        },
        {
          name:"待付款",
          value:1
        },
        {
          name:"待发货",
          value:2
        },
        {
          name:"待收货",
          value:3
        }
      ],
      activeStyle:{
        'font-weight': 'bold',
        'font-size': '38rpx',
        'color': '#FB1F1E'
      },
      itemStyle:{
        'font-weight': '500',
        'font-size': '32rpx',
        'color': '#242323'
      },
      list:[],
      page:1,
      size:10,
      showType:0,//0=全部订单 1=待付款订单 2=待发货订单 3=待收货订单
      status: 'loadmore',
      disabledBtn:false
    }
  },
  mixins: [authMixins],
  onPullDownRefresh(){
    this.page = 1;
    this.getList();
  },
  onReachBottom(){
    if(this.status == 'nomore') return;
    this.page++;
    this.status = 'loading';
    this.getList();
  },
  onShow() {
    // 加载页面数据
    this.page = 1;
    this.getList();
  },
  methods:{
    copyText(text){
      uni.setClipboardData({
        data: text,
        success: function () {
          uni.showToast({
            title: '复制成功',
            icon: 'none'
          });
        }
      });
    },
    getTaskStatus(taskList){
      if(!taskList) return [{status:0},{status:0}]
      let taskList1 = taskList.find(item=>item.taskType === 1)
      let taskList2 = taskList.find(item=>item.taskType === 2)
      if(!taskList1) taskList1 = {status:0}
      if(!taskList2) taskList2 = {status:0}
      return [taskList1,taskList2]
    },
    //是否线下签署
    isOfflineTask(taskList){
      if(!taskList) return false
      let taskList2 = taskList.find(item=>item.taskType === 2)
      if(!taskList2) return false
      return true
    },
    click(e){
      this.showType = e.value;
      this.page = 1;
      this.getList();
    },
    getList(){
      let params = {
        showType:this.showType,
        page:this.page,
        size:this.size
      }
      this.isLoading = true;
      this.$request.get('wx/order/list', params).then(({data}) => {
        if(data.totalPages<=this.page){
          this.status = 'nomore';
        }
        this.list = this.page == 1 ? data.data : this.list.concat(data.data);
      }).catch(err=>{
        this.$toast(err.errmsg)
      }).finally(()=>{
        this.isLoading = false;
      })
    },
    goDetail(id){
      this.$navTo('page_work/user/orderDetail', {orderId:id})
    },
    goInvoicing(id){
      this.$navTo('page_work/user/invoicing', {orderId:id})
    },
    createSign(id){
      this.sign(id);
    },
    signTask(id){
      this.getSignUrl(id)
    },
    onPrepay(orderId,actualPrice){
      this.prepay(orderId,actualPrice)
    },
    confirmOrder(id){
      this.confirm(id,()=>{
        this.page = 1;
        this.getList();
      })
    },
    edit1(id){
      this.$navTo('page_work/offlinePlay/index',{orderId:id,isPay:true,actualPrice:0,type:'edit'})
    },
    edit2(id){
      this.$navTo('page_work/offlinePlay/index',{orderId:id,isPay:false,actualPrice:0,type:'edit'})
    },
  }
}
</script>

<style scoped lang="scss">
.container{
  background: #F7F7F7;
  min-height:100vh;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  .tabs{
    padding: 20rpx 60rpx;
    /deep/ .u-tabs__wrapper__nav{
      justify-content: space-between;
    }
  }
  .content{
    .orderList{
      .orderItem{
        background: #fff;
        margin: 20rpx;
        padding: 40rpx;
        border-radius: 16rpx;
        .flex{
          display: flex;
        }
        .space-between{
          justify-content: space-between;
        }
        .order-num{
          font-size: 28rpx;
          font-weight: 500;
          color: #010812;
        }
        .order-status{
          font-size: 28rpx;
          font-weight: 500;
          color: #FB1F1E;
        }
        .content{
          margin-top: 20rpx;
          gap:20rpx;
          .image{
            width: 174rpx;
            height: 174rpx;
            border-radius: 16rpx;
            overflow: hidden;
            image{
              width: 100%;
              height: 100%;
            }
          }
          .name{
            font-size: 28rpx;
            font-weight: 500;
            color: #242323;
            margin-top: 20rpx;
          }
          .sku{
              font-size: 24rpx;
              font-weight: 400;
              margin-top: 20rpx;
              color: #666464;
            }
          .right{
            margin-left: auto;
            margin-top: 20rpx;
            .price{
              font-size: 20rpx;
              font-weight: bold;
              color: #242323;
              line-height: 32rpx;
              span{
                font-size: 28rpx;
                font-weight: bold;
                color: #242323;
              }
            }
            .number{
              font-size: 28rpx;
              margin-top: 36rpx;
              line-height: 40rpx;
              font-weight: 500;
              color: #242323;
            }
          }
        }
        .actualPrice{
          margin-top: -20rpx;
          font-size: 28rpx;
          font-weight: bold;
          color: #242323;
          display: flex;
          flex-direction: row-reverse;
          align-items: flex-end;
          gap:8rpx;
          span{
            font-size: 20rpx;
          }
          .price{
            font-size: 32rpx;
          }
        }
        .bottom{
          margin-top: 30rpx;
          font-size: 28rpx;
          font-weight: bold;
          color: #242323;
          display: flex;
          flex-direction: row-reverse;
          align-items: flex-end;
          gap:8rpx;
          .btn{
            font-size: 24rpx;
            border-radius: 26rpx;
            font-weight: 500;
            color: #FFF;
            background: #1777FF;
            padding: 14rpx 30rpx;
          }
          .btn1{
            background: #404041;
          }
        }
      }
    }
  }
  .popup {
    padding: 34rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #4D4D4D;
    line-height: 48rpx;
    box-sizing: border-box;
    width: 600rpx;
    margin: 0 auto;

    .title {
      font-size: 32rpx;
      font-weight: 500;
      color: #000000;
      text-align: center;
      margin-bottom: 10rpx;
    }
    .content{
      .image{
        width: 100%;
        height: 800rpx;
        image{
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>